<template>
	<div>
		<div v-if="user" v-my-directive data-title="用户中心" class="usermain">
			<!-- 左边 -->
			<userleft></userleft>
			<div class="CatalogLayout">
				<!-- 引入文件的方式 -->
				<div class="Genericpadding bold">我的账户</div>
				<div class="Genericpadding helf CatalogLayout interval">
					<div>
						<div class="userinfoboxs space-around">
							<el-card shadow="always">
								<div class="ThinLineLayout interval">
									<div style="color: rgb(27, 162, 122)" class="iconfont icon-USDT maxfont center"></div>
									<div class="center bold grey">可用余额</div>
									<span class="center maxminfont bold" v-if="user">{{ user.balance }}USDT</span>
								</div>
							</el-card>
							<el-card shadow="always">
								<div class="ThinLineLayout interval">
									<div style="color: #13c07e" class="iconfont icon-setting-role maxfont center"></div>
									<div class="center bold grey">用户类型</div>
									<span class="center maxminfont bold" v-if="user">{{ user.name }}</span>
								</div>
							</el-card>
							<el-card shadow="always">
								<div class="ThinLineLayout interval">
									<div style="color: #ffc20a" class="iconfont icon-heyueguanli maxfont center"></div>
									<div class="center bold grey">站内消费</div>
									<span class="center maxminfont bold">{{ user.Consumption }}USDT</span>
								</div>
							</el-card>
							<el-card shadow="always">
								<div class="ThinLineLayout interval">
									<div style="color: #f30" class="iconfont icon-dashangcishu maxfont center"></div>
									<div class="center bold grey">学分</div>
									<span class="center maxminfont bold" v-if="user">{{ user.integral }} 学分</span>
								</div>
							</el-card>
						</div>
					</div>
					<!-- 被点击的时候 就要开始获取地址  并且得到开始和结束时间-->
					<el-scrollbar :always="true">
						<div class="CatalogLayout minaxgap" v-loading="loading">
							<div class="Horizontalspacing space-around">
								<el-radio-group class="center" v-model="tabPosition">
									<el-radio-button label="" @click=";(tabPosition = ''), (curPage = 1), accountchanges()">{{ $t('message.ALL') }}</el-radio-button>
									<el-radio-button label="2" @click=";(tabPosition = '2'), (curPage = 1), accountchanges()">收入</el-radio-button>
									<el-radio-button label="3" @click=";(tabPosition = '3'), (curPage = 1), accountchanges()">支出</el-radio-button>
								</el-radio-group>
								<el-button @click="getdata()" type="warning">充值</el-button>
							</div>
							<div class="OrderNowh">
								<el-table :data="aclist" border>
									<el-table-column prop="operation" label="事件" min-width="100" show-overflow-tooltip />
									<el-table-column prop="value" label="金额" min-width="80" show-overflow-tooltip>
										<template #default="scope">
											<div>{{ '$' + scope.row.value }}</div>
										</template>
									</el-table-column>
									<el-table-column min-width="70" label="余额" show-overflow-tooltip>
										<template #default="scope">
											<div v-if="scope.row.notes.Balanceafterrecharge">${{ scope.row.notes.Balanceafterrecharge }}</div>
										</template>
									</el-table-column>
									<el-table-column width="185" label="订单号" show-overflow-tooltip>
										<template #default="scope">
											<div v-if="scope.row.notes.OrderNo">{{ scope.row.notes.OrderNo }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="timestamp" label="时间" width="170" show-overflow-tooltip />
									<!-- 里面包含支付 或者关闭 -->
									<!-- 已经支付的话 要不要给个查看 -->
									<!-- 已经支付是查看 -->
								</el-table>
							</div>
							<div class="dispaygrid">
								<el-pagination background class="centerend" :hide-on-single-page="onsingle" :current-page="curPage" @current-change="page" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogVisible" title="我要充值" :width="coreminwidth" :before-close="handleClose" align-center>
			<el-form :label-position="labelPosition" v-loading="loading" label-width="80px">
				<el-form-item label="充值类型">
					<el-select v-model="value" disabled placeholder="请选择充值类型"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select>
				</el-form-item>
				<el-space fill>
					<el-alert title="充值地址30分钟内有效,超过时间请重新获取 仅支持币安链(bsc)网络充值,请勿使用其他网络(充值后1-5分钟到账)" type="warning" :closable="false" />
					<el-form-item class="demo-image__error" label="二维码">
						<el-image :src="qrCodeUrl">
							<template #error>
								<div class="image-slot CatalogLayout">
									<el-icon><Loading /></el-icon>
									<span>点击刷新</span>
								</div>
							</template>
						</el-image>
					</el-form-item>
				</el-space>
				<el-form-item label="充值地址"
					><div class="aotowrap minxgap address">
						<el-tag effect="dark" size="small" type="info">{{ address }}</el-tag>
						<el-tag type="danger" size="small" @click="copy">复制</el-tag>
					</div>
				</el-form-item>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="getdata()" :loading="loading">刷新</el-button>
					<el-button type="primary" @click="dialogVisible = false">关闭 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script>
	import userleft from './../components/userleft'
	import { mapState } from 'vuex'
	import { dataRequest as api } from '@/api/api'
	import QRCode from 'qrcode'
	export default {
		name: 'name',
		computed: {
			...mapState(['logon', 'user']),
		},
		components: {
			// 组件
			userleft,
			QRCode,
		},
		data() {
			return {
				//返回值
				socket: '',
				loading: false,
				qrCodeUrl: '',
				dialogVisible: false,
				input: '',
				value: 'usdt',
				options: [{ value: 'usdt', label: 'USDT' }],
				form: { name: '' },
				address: '',
				onsingle: true,
				curPage: 1, //当前页
				pagesize: 9, //每页显示数量
				total: 0,
				aclist: [],
				//返回值
				offset: 'DESC',
				tosort: 'time',
				tabPosition: '',
				coreminwidth: '500px',
				labelPosition: 'right',
			}
		},
		methods: {
			handleResize() {
				// 使用媒体查询判断屏幕尺寸，并根据不同的尺寸修改播放器容器的大小

				if (window.matchMedia('(max-width: 860px)').matches) {
					this.coreminwidth = '3.6rem'
					this.labelPosition = 'top'
				} else {
					this.coreminwidth = '500px'
					this.labelPosition = 'right'
				}
			},
			async getdata() {
				this.loading = true
				let arr = await api(['GetWalletAddress', ''])
				if (arr.code == 200) {
					console.log(arr)
					this.address = arr.data
					await this.qrcde()
					this.loading = false
					this.dialogVisible = true
				} else {
					this.$message.error('网络拥堵,请稍后再试')
					this.address = ''
					this.qrcde()
					this.loading = false
				}
			},
			qrcde() {
				// 生成二维码
				QRCode.toDataURL(this.address, {
					margin: 2, // 设置边框大小，以像素为单位
				})
					.then(url => {
						this.qrCodeUrl = url
						console.log(this.qrCodeUrl)
					})
					.catch(error => {
						console.error('Error generating QR code:', error)
					})
			},
			// 函数
			async copy() {
				const replaced = this.address
				await navigator.clipboard.writeText(replaced).then(
					() => {
						this.$message.success('复制成功')
						this.qrcde()
					},
					() => {
						this.$message.error('复制失败！请手动赋值')
					},
				)
			},
			//
			async accountchanges() {
				this.loading = true
				let condition = {}
				if (this.tabPosition) {
					if (this.tabPosition == 2) {
						condition = { type: [2, 4] }
					} else {
						condition = { type: this.tabPosition }
					}
				}
				console.log(condition)
				let array = await api(['getdexrecord', { condition: condition, perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort }])
				console.log('变动', array)
				if (array.code == 200) {
					this.aclist = array.data
					this.total = array.massage / 1
				} else {
					this.aclist = []
					this.total = 0
				}
				this.loading = false
			},
			// 当充值按钮被点击 就获取充值地址  然后更新二维码
			page(ele) {
				this.curPage = ele
				this.accountchanges()
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done()
					})
					.catch(_ => {})
			},
		},
		mounted() {
			// 生命周期:
			window.addEventListener('resize', this.handleResize)
			this.handleResize()
			console.log(this.user)
			this.accountchanges()
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.handleResize)
		},
	}
</script>
<style scoped>
	.centerend {
		place-self: center end;
	}
	.helf {
		height: 100%;
	}
	.el-card {
		width: 180px;
	}
</style>
<style>
	.play .el-input__wrapper {
		border-radius: 4px 0 0 4px !important;
		height: 32px;
		border: 1px solid #c0c4cc;
		border-right: 0px;
		box-shadow: none;
	}
</style>
<style scoped>
	.OrderNowh {
		width: 820px;
	}
	.demo-image__error .el-image {
		width: 150px;
		height: 150px;
	}
	.userinfoboxs {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	.demo-image__error .image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150px;
		height: 150px;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 20px;
	}
	.demo-image__error .image-slot .el-icon {
		font-size: 20px;
	}
	@media screen and (max-width: 860px) {
		.scrollable-nav {
			overflow-x: auto; /* 如果弹性容器内的项目超出容器宽度，启用水平滚动 */
			white-space: nowrap; /* 防止导航项换行显示，使其水平排列在一行上 */
			display: inline-flex;
		}
		.el-card {
			width: 1.6rem;
		}
		.userinfoboxs {
			display: flex;
			flex-wrap: wrap;
			gap: 0.1rem;
		}
		.maxminfont {
			font-size: 0.2rem;
		}
		.address {
			font-size: 10px;
		}
	}
</style>
